<template>
    <div>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,minimum-scale=1.0"/>
        <div class="p1">
            <el-menu :default-active="activeIndex" 
            class="el-menu-demo" 
            mode="horizontal" 
            background-color="#545c64" 
            text-color="#fff" 
            active-text-color="#ffd04b">
                <el-menu-item index="1"><router-link to="/produce">首页</router-link></el-menu-item>
                <el-menu-item index="2"><router-link to="/navi">我要派单</router-link></el-menu-item>
                <el-menu-item index="3"><router-link to='/TaskCard'>我要接单</router-link></el-menu-item>
                <el-menu-item index="4"><router-link to='/Upload'>意见反馈</router-link></el-menu-item>
                <el-menu-item index="5">帮助</el-menu-item>
                <el-menu-item index="6">{{showUserName}}</el-menu-item>
                <el-menu-item index="7" @click="giao"><el-avatar :src="imgpath"></el-avatar></el-menu-item>

                <!--<el-menu-item index="7"><router-link to='/User'><el-avatar icon="el-icon-user-solid"  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></router-link></el-menu-item>-->
            </el-menu>
        </div>
        <el-card class="card-body">
            <h1 style="">接单</h1>
            <div class="outCard">
                <div v-for="i in items" :key='i.id' @click="goToDetail(i)" class="card">
                    <!--<img :src=i.src alt="" class="card-image">-->
                    <img :src="imageSrc" alt="" width="200px" height="200px"/>
                    <div class="card-footer">
                        <div>类型:{{ i.type }}</div>
                        <div>开始地址:{{ i.beginAddress }}</div>
                        <div>结束地址:{{ i.endAddress }}</div>
                        <div>详细地址:{{ i.newAddress }}</div>
                        <div>跑腿费:{{i.runprice}}</div>
                    </div>
                </div>
            </div>
            <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange"
                :current-page="page.currentPage" :page-sizes="[10, 20, 30]" :page-size="page.pageSize" :total="total"
                layout="total,sizes,next,jumper"></el-pagination>
        </el-card>
    </div>
</template>
<script>
import axios from '../service/service'
import Cookie from 'js-cookie';
export default {
    data() {
        return {
            type: '',
            dialogForm: {
                item: null,
            },
            total: 0,
            page: {
                currentPage: 1,
                pageSize: 10
            },
            items: [],
            dialogVisible: false,
            activeIndex:'1',
            defaultActive:'1',
            imgpath:'',
            imageSrc: require('../assets/img/bg.jpeg')
        };
    },
    created() {
        this.fetchList();
        const giao = Cookie.get('username')
        this.username = giao;
        const imgdata = localStorage.getItem('imgpath')
        this.imgpath= imgdata
    },
    methods: {
        giao(){
            this.$router.push('/user')
    },
        async fetchMessage() {
            await axios.post('/getMessage', { OrderId: this.$route.params.OrderId })
                .then(res => {
                    console.log(res);
                    this.type = res.data[0].type;
                    console.log(this.type)
                    
                    if (this.type)
                    //!this.imageSrc
                    {
                        this.imageSrc = require(`../assets/${this.type}.jpg`)
                        //"../assets/kuaitui.jpg"
                        //"https://bpic.588ku.com/element_origin_min_pic/19/04/10/37e4fc917a27adbc791e30095893a2d1.jpg"
                    }
                    
                    this.beginAddress = res.data[0].beginAddress
                    this.endAddress = res.data[0].endAddress
                    this.newAddress = res.data[0].newAddress
                    this.isTaken = res.data[0].isOrder == -1 ? false : true
                })
            },
        async fetchList() {
            await axios.post('/getList', {
                currentPage: this.page.currentPage,
                pageSize: this.page.pageSize,
            })
                .then(res => {
                    console.log(res);
                    this.items = res.data.results
                    this.total = res.data.length
                })
        },
        goToDetail(i) {
            this.$router.push({
                name: 'TaskDetail',
                params: { OrderId: i.OrderId }
            })
            console.log(i.OrderId);
        }, 
        // 处理分页大小改变
        async handleSizeChange(val) {
            this.page.pageSize = val;
            await this.fetchList();
        },

        // 处理当前页码改变
        async handlePageChange(val) {
            this.page.currentPage = val;
            await this.fetchList();
        },
    },
    computed:{
        showUserName(){
        return Cookie.get('username')
      }
    },
    mounted() {
        this.fetchMessage();
    }
};
</script>
<style>
.el-menu-demo{
    display:flex;
    justify-content:flex-start;
    flex-wrap: nowrap;
    overflow: auto;
}
.outCard {
    background-color: rgba(255, 250, 250, 0);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.card {
    background: linear-gradient(rgb(221, 255, 0), rgb(0, 250, 71)) ;
    border-radius: 1rem;
    margin: 20px 0;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 300px;
    padding: 10px;
}

.card-image {
    border-radius: 5rem;
    width: 100%;
    height: 200px
}

.card-body {
    background: url("../assets/接单背景.jpg");
    padding: 15px;
    border-radius: 5rem;
    overflow-y: auto;
}

.card-footer {
    padding: 10px;
    background-color: #f5f5f5;
    border-top: 1px solid #ccc;
}

</style>